<template>
  <div>
    <el-card >
      <span v-if="orderList.length<=0"><h1 style="color: #409EFF">该状态下暂时没有订单</h1></span>
      <div v-for="item in orderList" >
        <div style="float: left;margin-left: 20px;margin-top: 20px">
          <el-card class="box-card" style="margin-bottom: 20px">
            <div slot="header" class="clearfix">
              <div>
                <span><h5 style="color: #409EFF">订单编号--  {{item.code}}</h5> </span>
                <el-button style="float: right;" type="primary" @click="pay(item)" v-if="item.state==3">付款</el-button>
                <el-button style="float: right;" type="primary" @click="findPayLog(item)" v-if="item.state==4">支付记录
                </el-button>
              </div>
              <div>
                <span><h5 style="color: #409EFF">订单状态-- {{item.state | stategl}}</h5> </span>
              </div>
            </div>
            <div class="text item" >
              <el-row :gutter="20">
                下单时间 : {{item.createDate | datefmt}}
              </el-row>
              <el-row class="box"></el-row>
              <el-row :gutter="20">
                {{'公司名称 : '+item.customerName}}
              </el-row>
              <el-row class="box"></el-row>
              <el-row :gutter="20">
                {{'联系人名称 : '+item.linkmanName}}
              </el-row>
              <el-row class="box"></el-row>
              <el-row :gutter="20">
                {{'联系电话 : '+item.linkmanTel}}
              </el-row>
              <el-row class="box"></el-row>
              <el-row :gutter="20">
                {{'税前价格 : '+item.price}}
              </el-row>
              <el-row class="box"></el-row>
              <el-row :gutter="20">
                {{'税率 : '+item.taxRate}}
              </el-row>
              <el-row class="box"></el-row>
              <el-row :gutter="20">
                {{'税后价格 : '+item.priceIt}}
              </el-row>
              <el-row>
                <el-dialog
                  title="订单支付"
                  :visible.sync="isShowPayMent"
                  width="40%">
                  <div class="tr_rechbox">
                    <div class="tr_rechcho am-form-group">
                      <span>支付方式：</span>
                      <el-radio v-model="payment.paytype" :label="0"><img src="@/assets/image/zfbpay.png" width="99px"
                                                                          height="33px"></el-radio>
                      <el-radio v-model="payment.paytype" :label="1"><img src="@/assets/image/wechatpay.png"
                                                                          width="99px"
                                                                          height="33px"></el-radio>
                    </div>
                    <div class="tr_rechnum">
                      <span>应付金额：</span>
                      <p class="rechnum">待支付 {{payment.priceIt}} 元</p>
                    </div>
                  </div>
                  <div class="tr_paybox">
                    <el-divider/>
                    <span><el-button type="primary" style="float: right;" @click="payMent(payment.code,nowCustomer.id)">确认支付</el-button></span>
                    <el-divider/>
                  </div>
                </el-dialog>
              </el-row>
            </div>
          </el-card>
        </div>
      </div>
      <div>
        <el-dialog title="支付记录" :visible.sync="dialogLogVisible" @close="clearLog">
          <el-table
            :data="payLog"
            stripe
            style="width: 100%">
            <el-table-column
              prop="outTradeNo"
              label="订单编号">
            </el-table-column>
            <el-table-column
              label="更新时间">
              <template slot-scope="scope">
                {{scope.row.createTime | createTimegl}}
              </template>
            </el-table-column>
            <el-table-column
              prop="tradeNo"
              label="交易流水号"
              width="200px">
              <template slot-scope="scope">
                {{scope.row.tradeNo | tradeNogl}}
              </template>
            </el-table-column>
            <el-table-column
              label="交易状态">
              <template slot-scope="scope">
                {{scope.row.tradeState | tradeStategl}}
              </template>
            </el-table-column>
            <el-table-column
              label="支付方式">
              <template slot-scope="scope">
                {{scope.row.payType | payTypegl}}
              </template>
            </el-table-column>
          </el-table>
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>

<script>
  import Moment from "moment";

  export default {
    name: 'OrderCus',
    data() {
      return {
        nowCustomer: {},
        orderList: [],
        state: 0,
        isShowPayMent: false,
        dialogLogVisible: false,
        payment: {},
        payLog: []
      }
    },
    filters: {
      stategl(val) {
        if (val == 3) {
          return "已报价、待支付"
        } else if (val == 4) {
          return "已支付"
        } else if (val == 5) {
          return "已转合同订单"
        } else if (val == 2) {
          return "已制作"
        } else if (val == 1) {
          return "未制作"
        }
      },
      payTypegl(val) {
        if (val == 0) {
          return "支付宝"
        } else if (val == 1) {
          return "微信"
        }
      },
      tradeStategl(val) {
        if (val == 0) {
          return "发起支付"
        } else if (val == 1) {
          return "支付成功"
        } else {
          return "支付失败"
        }
      },
      tradeNogl(val) {
        if (val == null) {
          return "暂无流水号"
        } else {
          return val
        }
      },
      createTimegl(val) {
        return Moment(val).format("YYYY-MM-DD HH:mm:SS")
      }
    },
    methods: {
      clearLog() {
        this.payLog = []
      },
      findPayLog(item) {
        this.$http.post("/aliPay/findpayLog", item).then((res) => {
          if (res.data.success) {
            this.dialogLogVisible = true
            this.payLog = res.data.result
            console.log(this.payLog)
          } else {
            this.$message.error(res.data.message);
          }
        })
      },
      pay(item) {
        this.isShowPayMent = true
        this.payment.priceIt = item.priceIt
        this.payment.code = item.code
      },
      order() {
        console.log(this.state)
        this.$http.get("/information/customerLogin/AllInOrder/" + this.nowCustomer.id + "/" + this.state).then((res) => {
          if (res.data.success) {
            this.$message.success(res.data.message);
            this.orderList = res.data.result
          } else {
            this.$message.error(res.data.message);
          }
        })
      },
      payMent(code, id) {
        this.$http.get("/aliPay/pay/" + code + "/" + id).then((res) => {
          if (res.data.success) {
            //字符串，js执行html字符串【将字符串写入到当前浏览器页面docment中】
            document.write(res.data.result)
          } else {
            this.$message.error(res.data.message);
          }
        })
      }
    },
    mounted() {
      this.nowCustomer = JSON.parse(sessionStorage.getItem("customer"))
      this.state = this.$route.query.state
      this.order()
    }
  }
</script>

<style scoped>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }

  .box {
    height: 20px;
  }

  .el-divider--horizontal {
    display: block;
    height: 0px;
    width: 100%;
    margin: 25px;
  }

  .infinite-list-wrapper {
    width: 100%;
    height: 450px;
    border: 1px solid #8c939d;
  }

  .list {
    width: 95%;
  }

  .list li {
    height: 30px;
    margin: 5px 0;
    background: #8c939d;
    list-style: decimal;
  }

  .infinite-list-wrapper p {
    text-align: center;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }

  .rechnum {
    color: #ec5a5b;
    font-size: 24px;
    font-weight: bold;
    display: inline-block;
    line-height: 40px;
  }

  .tr_rechnum {
    height: 40px;
  }

  .tr_rechcho {
    margin-bottom: 20px;
    display: inline-block;
  }

  .am-form-group {
    margin-bottom: 1.5rem;
  }

  .tr_paybox {
    padding: 20px;
  }

  .am-form-group > label > span {
    color: #999;
  }

  .am-radio .am-icon-unchecked, .am-radio .am-icon-checked {
    top: 13px;
  }
</style>
